<!--
	作者：ZhangXin
	时间：2020-07-21
	描述：博客标签页面
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments::head(~{::title})">
	<title>标签</title>
</head>

	<body class="tag-body">
	<!--导航-->
	<nav th:replace="fragments::menu(3)"></nav>


	<!--中间内容-->
		<div class="m-container-mini m-padded-tb-big m-opacity-mini">
			<div class="ui container">
				<!--header  -->
				<div class="ui top attached segment">
					<div class="ui middle aligned two column grid">
						<div class="column">
							<h3 class="ui teal header">标签</h3>
						</div>
						<div class="right aligned column">
							共
							<h2 class="ui orange header m-inline-block m-text-thin" th:text="${#arrays.length(tags)}"> 14 </h2>个
						</div>
					</div>
				</div>
				<div class="ui attached segment m-padded-tb-large">	
						<a href="#"  class="ui  basic left pointing large label m-margin-tb-tiny"  th:classappend="${tag.id==activeTagId}?'teal'" th:href="@{/tags/{id}(id=${tag.id})}"  th:each="tag:${tags}">
							<span th:text="${tag.name}"></span>
							<div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
						</a>

				</div>
				<div class="ui top attached teal segment">
					<div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear" th:each="blog : ${page.content}">
						<div class="ui mobile reversed stackable grid" >
							<div class="eleven wide column">
								<h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">Spring Boot-01- 快速入门篇</a></h3>
								<p class="m-text" th:text="|${blog.description}......|">pring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot 是所有基于 Spring Framework 5.0 开发的项目的起点。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。
								</p>
								<div class="ui stackable grid">
									<div class="row">
									<div class="eleven wide column">
										<div class="ui mini horizontal link list">
											<div class="item">
												<img src="../static/images/001.jpg" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image" />
												<div class="content">
													<a href="#" class="header" th:text="${blog.user.nickname}">ZhangXin</a>
												</div>
											</div>
											<div class="item">
												<i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-07-20</span>
											</div>
											<div class="item">
												<i class="eye icon"></i><span th:text="${blog.views}">1234</span>
											</div>
											<div class="item">
												<i class="comment outline icon"></i> <span th:text="${blog.comments.size()}">2222</span>
											</div>
										</div>
									</div>
									<div class="right attached five wide column">
										<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin" th:text="${blog.type.name}">
											SpringBoot
										</a>
									</div>
									</div>
									<div class="row">
										<div class="column">
											<a href="#" th:href="@{/tags/{id}(id=${tag.id})}" class="ui basic left pointing label m-text-thin"  th:classappend="${tag.id==activeTagId}?'teal'" th:each="tag:${blog.tags}" th:text="${tag.name}">java</a>
										</div>
									</div>
								</div>

							</div>
							<div class="five wide column">
								<a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
									<img src="../static/images/001.jpg" alt="" class="ui rounded image" th:src="@{${blog.firstPicture}}"/>
								</a>
							</div>
						</div>
					</div>
					<!--footer-->
					<div class="ui bottom attached segment">
						<div class="ui middle aligned two column grid">
							<div class="column">
								<a href="#" th:href="@{'/tags/'+${activeTagId}(page=${page.number}-1)}" th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
							</div>
							<div class="right aligned column">
								<a href="#" th:href="@{'/tags/'+${activeTagId}(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--底部内容-->
		<footer th:replace="fragments::footer"></footer>

	    <script th:replace="fragments::script"></script>

		<script>
			$('.menu.toggle').click(function() {
				$('.m-item').toggleClass('m-mobile-hide')
			});

			$('.menu.toggle').click(function() {
				$('.m-item').toggleClass('m-mobile-show');

			});
		</script>
	</body>

</html>